<template>
    <div class="Progress f-cb">
        <div class="ProgressLine f-cb">
            <span class="inside" :style="'width:'+width+'%'"></span>
        </div>
        <p>{{$t('m.text36')}}{{width}}%</p>
    </div>
</template>
<script>
    import {getsubscript} from "@/common/common";
    export default {
        components: {},
        data() {
            return{
                width:"",
            };
        },
        computed:{
            flowInfo(){
                return JSON.parse(sessionStorage.getItem('flowInfo'))
            }
        },
        mounted(){
           this.flowInfoChange()
        },
        methods:{
            checkAdult(value) {
                return value == this.flowInfo.page_info.id;
            },
            flowInfoChange(){
                console.log(this.flowInfo,'xiaob')
            }
         },
        watch:{
            flowInfo:{
                handler(val,old){
                    console.log(val,'55555')
                    if(JSON.stringify(val) != '{}'){
                        var num = getsubscript(val)
                        this.width = ((num/this.flowInfo.page_flow.length)*100).toFixed(0)
                    }
                },
                deep:true,
                immediate:true,
            }
        },
    }
</script>
<style lang="less">
    .Progress{
        width: 600px;
        margin:0 auto;
        padding:20px 0 29px;
        .ProgressLine{
            width: 100%;
            height: 6px;
            background: #e7e6eb;
            border-radius: 3px;
            position: relative;
            .inside{
                position: absolute;
                left:0;
                top:0;
                height: 100%;
                border-radius: 3px;
                background: @hoverColor;
            }
            .inside:after{
                content: "";
                width: 12px;
                height: 12px;
                position: absolute;
                right: -6px;
                top: -3px;
                background: @hoverColor;
                border-radius: 50%;
            }
        }
        p{
            padding-top: 13px;
            text-align: center;
            font-size: 14px;
            color: @titleColor;
            line-height:34px;
        }
    }
</style>